<template>
  <div class="difficulty-tags">
    <a-tag 
      v-for="level in levels" 
      :key="level.code"
      :class="[
        `level-${level.code}`,
        { active: selectedLevel === level.code }
      ]"
      @click="handleSelect(level)"
    >
      {{ level.desc }}
    </a-tag>
  </div>
</template>

<script>
import { subject } from '@/api/subject'

export default {
  name: 'DifficultyTags',
  data() {
    return {
      levels: [],
      selectedLevel: null
    }
  },
  created() {
    this.fetchLevels()
  },
  methods: {
    async fetchLevels() {
      try {
        const res = await subject.getLevels()
        this.levels = res.content
      } catch (error) {
        this.$message.error('获取难度列表失败')
      }
    },
    handleSelect(level) {
      this.selectedLevel = this.selectedLevel === level.code ? null : level.code
      this.$emit('level-change', this.selectedLevel)
    }
  }
}
</script>

<style scoped>
.difficulty-tags {
  display: inline-flex;
  gap: 8px;
}

.ant-tag {
  cursor: pointer;
  margin-right: 8px;
  padding: 4px 12px;
  transition: all 0.3s;
  border: none;
}

/* 入门 */
.level-0 {
  color: #059669;
  background: #ecfdf5;
}
.level-0:hover, .level-0.active {
  color: #fff;
  background: #10b981;
}

/* 初级 */
.level-1 {
  color: #2563eb;
  background: #eff6ff;
}
.level-1:hover, .level-1.active {
  color: #fff;
  background: #3b82f6;
}

/* 中级 */
.level-2 {
  color: #d97706;
  background: #fef3c7;
}
.level-2:hover, .level-2.active {
  color: #fff;
  background: #f59e0b;
}

/* 高级 */
.level-3 {
  color: #dc2626;
  background: #fee2e2;
}
.level-3:hover, .level-3.active {
  color: #fff;
  background: #ef4444;
}

/* 地狱 */
.level-4 {
  color: #7c3aed;
  background: #f3e8ff;
}
.level-4:hover, .level-4.active {
  color: #fff;
  background: #8b5cf6;
}
</style> 